import { h, render, Component, Fragment, toChildArray } from "../../../lib/preact";
import { useState, useEffect, useCallback, useContext, useRef } from "../../../lib/hooks";
import classNames from '../../../lib/classNames'
const back = "#000";
const fore = "#FFF";

const styleset = CSS.set`
  :root {
     color: ${fore};
     padding:0.5em 1em 0.5em 3em;
     background: ${back} no-repeat url(images/perfecto.png);
     background-position: top 50% left 0.5em;
     background-size: 2em;
  }

  em {
    color: gold;
  }
`;

function Button(props) {

  const [isLoading, setLoading] = useState(false);
  const [isDisabled, setDisabled] = useState(false);
  const { onClick } = props;
  const { color, size, round, circle, isPrimary, theme, block, styles, plain, disabled, leftIcon, rightIcon, children } = props;
  const childrenArray = toChildArray(children)
  const handleClick = (event) => {
    setLoading(true);
    setDisabled(true)
    if(onClick){
      onClick(event);
    }
    
    //console.log(styleset)
    // 模拟异步操作
    setTimeout(() => {
      setLoading(false);
      setDisabled(false)
    }, 6000);
  };
  useEffect(() => {
    //初始化
    console.log('button props', props)
    return function cleanup() {

    };
    //return () => {}
  }, []);
  const blockClass = 'btn-bloack'
  let isBlock = false;
  if (block) {
    isBlock: true
  } else {
    isBlock: false
  }

  const disabledClass = 'btn-disabled';

  //[`btn_${this.props.type}`]: true,
  const themeClass = 'btn-' + theme;
  //console.log(block,circle)
  const buttonClasses = classNames("btn", { "loading": isLoading },
    {
      [themeClass]: true,
      [blockClass]: isBlock,
      [disabledClass]: isDisabled,
    });
  return <Fragment>
    <button style={styles} class={buttonClasses} onClick={handleClick} disabled={isLoading} >
      {leftIcon ? (
        <i className={` fa  ${leftIcon}`} ></i>
      ) : null}
      {isLoading ? "Loading..." : props.children}
      {rightIcon ? (
        <i className={` fa ${rightIcon}`} ></i>
      ) : null}
    </button>
  </Fragment>;
}

// class Button extends Component {

//   constructor(props) {
//     super();
//     //this.state = { time: Date.now() };
//     //const { children } = props
//     //this.children = children
//     const [isLoading, setLoading] = useState(false);
//     const { color, size, round, circle, isPrimary, plain, disabled, leftIcon, rightIcon, children } = props;
//     const buttonStyle = {
//       backgroundColor: color,
//       padding: "12px 24px",
//       borderRadius: "4px",
//       color: "#fff",
//       fontWeight: "bold",
//       cursor: "pointer",
//       border: "none",
//       boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
//     };

//     console.log(children, props)
//     this.className = "btn";
//     if (isPrimary) {
//       this.className += " btn-default";
//     }
//   }

//   // Lifecycle: Called whenever our component is created
//   componentDidMount() {
//     // update time every second

//   }

//   // Lifecycle: Called just before our component will be destroyed
//   componentWillUnmount() {
//     // stop when not renderable

//   }

//   render() {
//     return <Fragment>
//       <button class={this.className} >{this.props.children}</button>
//     </Fragment>;
//   }
// }
Button.defaultProps = {
  isPrimary: true,
  theme: 'default'
}
export default Button;